<template>
  <div>
    <v-header theme="light"></v-header>
    <div class="login-fluid">
      <div class="login-content">
        <div class="login-panel">
          <Card class="login" dis-hover :bordered="false">
            <p slot="title" style="text-align: center;font-size: 20px"> 账户登录</p>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
              <FormItem prop="mobile">
                <Input v-model="formValidate.mobile" placeholder="请输入手机号或邮箱号" @on-enter="handleLogin">
                <Icon type="ios-person" slot="prepend"></Icon>
                </Input>
              </FormItem>
              <FormItem prop="password">
                <Input type="password" v-model="formValidate.password" placeholder="请输入密码" @on-enter="handleLogin">
                <Icon type="locked" slot="prepend"></Icon>
                </Input>
              </FormItem>
              <FormItem prop="validateCode" inline>
                <Input v-model="formValidate.validateCode" placeholder="请输入验证码" style="width: 40%;"
                       @on-enter="handleLogin"/>
                <img :src="validateCodeLink" width="100" height="32" style="margin-left: 15px;vertical-align: bottom"
                     @click="refreshValidateCode">
                <a href="#" @click="refreshValidateCode">换一张</a>
              </FormItem>
              <FormItem>
                <Button type="primary" :long="true" @click="handleLogin">登录</Button>
              </FormItem>
              <FormItem>
                <router-link to="/register">注册账户</router-link>
                <router-link to="/findPswd" style="float: right">忘记密码</router-link>
              </FormItem>
            </Form>
          </Card>
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script>
  import auth from '@/utils/auth'
  import consts from '@/utils/consts'
  import Model from '@/models/actions/login'
  import Model1 from '@/models/apps'
  import header from '@/components/header'
  import footer from '@/components/footer'
  import storage from '@/utils/helpers/storageLite'
  export default {
    name: 'login',
    components: {
      'v-header': header,
      'v-footer': footer
    },
    data () {
      return {
        validateCodeLink: consts.BASE_URL + '/pictureCheckCode',
        formValidate: {
          mobile: '15391810680',
          password: 'angedainifei123',
          validateCode: ''
        },

        ruleValidate: {
          mobile: [
            {
              required: true,
              message: '用户不能为空'
            }
          ],
          password: [
            {
              required: true,
              message: '密码不能为空'
            }
          ],
          validateCode: [
            {
              required: true,
              message: '验证码不能为空'
            }
          ]
        }
      }
    },
    methods: {
      handleLogin () {
        this.$refs.formValidate.validate((valid) => {
          if (valid) {
            new Model()
              .POST({
                params: this.formValidate
              })
              .then((res) => {
                if (res.data.errorCode === '1000') {
                  // 帐号或密码错误
                  this.$Message.error('登录失败!帐号或密码错误')
                } else if (res.data.errorCode === '1001') {
                  this.$Message.error('登录失败！验证码不正确')
                  this.refreshValidateCode()
                } else {
                  this.$Message.success('登录成功')
                  auth.login(res.data)
                  this.forward()
                }
              })
          }
        })
      },
      refreshValidateCode () {
        this.validateCodeLink = this.validateCodeLink + '?tm=' + Math.random()
      },
      forward () {
        new Model1('allApps')
          .GET({
            params: {
              userNo: storage.get('userNo')
            }
          })
          .then((res) => {
            if (res.data.data.length === 0) {
              // 商户刚刚创建，没有应用，跳往第应用增加页面
              this.$router.push('/')
              return
            }
            this.$store.commit('GET_CURRENTAPP', {
              'data': res.data.data[0].id
            })
            this.$router.push('/appCenter/' + res.data.data[0].id + '/summary')
          })
      }
    }
  }
</script>

<style type="text/css" ref="">
  .login-fluid {
    background: #40b1f9;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
  }

  .login-content {
    width: 1000px;
    margin: 0 auto;
    background: url(./logobg.png) no-repeat;
    height: 474px;
    position: relative;
  }

  .login-content .login-panel {
    width: 380px;
    right: 0;
    position: absolute;
    top: 40px;
    border-radius: 2px;
    margin-bottom: 25px;
    padding: 25px 30px 25px 30px;
  }

  a {
    margin-left: 8px;
  }
</style>
